<template>
  <div class="job-order-statistics">
    <div class="header">
      <el-select
        v-model="quarter"
        placeholder="请选择季度"
        style="margin: 0 10px"
        @change="quarterChange"
      >
        <el-option
          v-for="item in quarterOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="quarter"
        placeholder="请选择季度"
        style="margin: 0 10px"
        @change="quarterChange"
      >
        <el-option
          v-for="item in quarterOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="quarter"
        placeholder="请选择季度"
        style="margin: 0 10px"
        @change="quarterChange"
      >
        <el-option
          v-for="item in quarterOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-date-picker v-model="year" :clearable="false" placeholder="选择年" type="daterange" @change="yearChange">
      </el-date-picker>
    </div>
    <div class="statistics-content">
      <div class="card-row1">
        <el-tabs v-model="activeTab" class="tab-list" @tab-click="tabChange">
          <el-tab-pane label="作业量" name="1"></el-tab-pane>
          <el-tab-pane label="作业费用" name="2"></el-tab-pane>
        </el-tabs>
        <div v-show="activeTab==='1'" v-loading="tabLoading">
          <div class="chart-title">
            <div class="title">作业量趋势</div>
            <div class="right-info">合计：<span>2230</span>吨</div>
          </div>
          <div ref="bar1" class="chart"></div>
        </div>
        <div v-show="activeTab==='2'" v-loading="tabLoading">
          <div class="chart-title">
            <div class="title">作业费用趋势</div>
            <div class="right-info">合计：<span>2230</span>元</div>
          </div>
          <div ref="bar2" class="chart"></div>
        </div>
      </div>
      <div class="card-row1">
        <div class="table-search">
          <div>作业明细</div>
          <div>
            <el-select
              v-model="quarter"
              placeholder="请选择产品"
              style="margin: 0 10px"
              @change="quarterChange"
            >
              <el-option
                v-for="item in quarterOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </div>
        </div>
        <el-table
          :data="tableData"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="作业任务编码"></el-table-column>
          <el-table-column label="作业费用"></el-table-column>
          <el-table-column label="作业量"></el-table-column>
          <el-table-column label="物流环节"></el-table-column>
          <el-table-column label="仓库名称"></el-table-column>
          <el-table-column label="产品类型"></el-table-column>
          <el-table-column label="产品四级"></el-table-column>
          <el-table-column label="服务内容" prop="address"></el-table-column>
          <el-table-column label="作业日期" prop="date"></el-table-column>
        </el-table>
        <div class="table-bottom">
          <div>
            <span class="span-btn">数据统计&gt;&gt;</span>
            <span class="span-info">共筛选：<span>{{weight}}</span>吨</span>
            <span class="span-info"> <span>{{money}}</span>元</span>
          </div>
          <el-pagination
            background
            layout="prev, pager, next,total,"
            :page-size="10"
            :total="100"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {getBarOptions} from '@/views/jobOrderStatistics/chartOptions'

export default {
  name: "jobOrderStatistics",
  components: {},
  data () {
    return {
      quarter: "",
      quarterOptions: [
        {
          value: "1",
          label: "第一季度",
        },
        {
          value: "2",
          label: "第二季度",
        },
        {
          value: "3",
          label: "第三季度",
        },
        {
          value: "4",
          label: "第四季度",
        },
      ],
      year: "",
      activeTab: "1",
      tabLoading: false,
      multipleSelection:[],
      tableData: [
        {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        money:50,
        weight:10
      }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        money:14,
        weight:120
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        money:40,
        weight:350
      },]
    };
  },
  computed: {
    weight(){
      return this.multipleSelection.reduce((acc, cur) => acc + cur.weight, 0)
    },
    money(){
      return this.multipleSelection.reduce((acc, cur) => acc + cur.money, 0)
    }
  },
  watch: {},
  methods: {
    quarterChange () {
    },
    yearChange () {
    },
    handleSelectionChange(val) {
      console.log('val',val)
      this.multipleSelection = val;
    },
    initBar1 ({yData, name,unit}) {
      let chart = echarts.init(this.$refs.bar1);
      let option = getBarOptions({yData, name,unit})
      chart.setOption(option)
      window.addEventListener('resize', () => {
        chart.resize()
      })
    },
    initBar2 ({yData, name,unit}) {
      let chart = echarts.init(this.$refs.bar2);
      let option = getBarOptions({yData, name,unit})
      chart.setOption(option)
      window.addEventListener('resize', () => {
        chart.resize()
      })
    },
    tabChange () {
      this.tabLoading = true
      setTimeout(() => {
        this.tabLoading = false
        if (this.activeTab === '1') {
          this.initBar1({yData: [123, 45, 67, 23, 45, 67, 23, 45], name: "作业量",unit: "吨"})
        } else {
          const yData = [56, 85, 96, 9, 6, 42, 7, 27, 5, 75]
          this.initBar2({yData, name: "作业量费用",unit: "元"})
        }
      }, 500)

    },
  },
  created () {

  },
  mounted () {
  },

};
</script>

<style lang="scss" scoped>
.job-order-statistics {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  --container-padding: 20px;

  .header {
    background-color: #fff;
    padding: var(--container-padding);
    display: flex;
  }

  .statistics-content {

    .chart-title {
      display: flex;
      justify-content: space-between;
      padding: 10px 20px;

      .title {
        font-weight: bold;
      }

      .right-info {
        font-size: 13px;
        color: #7c7c7c;
      }
    }

    .chart {
      height: 300px;
    }

    .card-row1 {
      background-color: #fff;
      padding: 10px var(--container-padding);
      margin: 10px 0;
    }
    .table-search{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .table-bottom{
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      padding-top: 10px;
      .span-btn{
        color: #409eff;
        cursor: pointer;
      }
      .span-info{
        margin-left: 8px;
      }
    }
  }
}
</style>
